<template>
  <div id="box" :class="modalClass" :openPhoneCode="openPhoneCode" :openTransPws="openTransPws" :verfityTitle="verfityTitle">
    <div id="content"  @click.stop="" :style="style">
      <p class="p1">{{title}}</p>
      <p class="input p2" v-if="needTransPws === 1">
        <input type="password" v-model="pws" placeholder="交易密码">
        <a href="javascript:void 0;" class="right" @click="forgetPws">忘记密码</a>
      </p>
      <p class="input p3" v-if="needPhoneCode === 1">
        <input type="number" placeholder="短信验证码" v-model="mbCode">
        <button class="right">
          <tongdun-Countdown class="right" @run="sendCode" @getTdToken="getTdToken" wt='' hg='40px'
              verfityMobile='false' ref="tdEle" beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000" endtime="60">
          </tongdun-Countdown>
        </button>
      </p>
      <p class="p4" v-if="needPhoneCode === 1">输入您的手机 <span>{{phone}}</span> 收到的验证码</p>
      <p class="p5">
        <button @click="callback">提交</button>
      </p>
      <button class="closeWindow" @click="cancel">
        <svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
      </button>
    </div>
  </div>
</template>
<!--openPhoneCode 是否打开获取验证码1打开 2关闭   openTransPws是否打开输入交易密码 1打开 2关闭-->
<script>
  /*包含获取验证码(同盾) ， 输入交易密码*/
  import { getMbCode2 } from "../http/api";
   export default {
     name : 'GetMbcode',
     data(){
       return{
         pws : null,//交易密码
         mbCode : null,//手机验证码
         phone : null,//手机号
         modalClass : 'modal-hide',
         yzm_token : null,
         blackBox : null,
         title : '安全验证',
         needPhoneCode : 1, //是否需要开起同盾 获取验证码 //1开起 2关闭
         needTransPws : 1, //是否需要开起交易密码  //1开起 2关闭
         style : {},//弹窗样式
       }
     },
     watch:{
       'mbCode'(){
         this.mbCode = this.mbCode.replace(/[^\d]/g,'').slice(0,6);
       },
       'pws'(){
         this.pws =  this.pws.replace(/[^\d]+/g,'').slice(0,6);
       },
     },
     props:{
       'openTransPws':{
         /*是否打开交易密码*/
         type : Number,
         default : 1 //1开起 2关闭
       },
       'openPhoneCode':{
         /*是否打开同盾，手机验证码*/
         type: Number,
         default: 1 //1开起 2关闭
       },
       'verfityTitle':{
         /*验证标题*/
         type: String,
         default: '安全验证'
       }
     },
     components:{
       tongdunCountdown: resolve => { require(['../components/tongdunCountdown.vue'], resolve) },//同盾倒计时功能插件
     },
     mounted() {
       this.needTransPws = Number(this.openTransPws) === 1 ? this.openTransPws : 2 ;
       this.needPhoneCode = Number(this.openPhoneCode) === 1 ? this.openPhoneCode  : 2;
       let openPhoneCode = this.needPhoneCode === 1; //是否开启同盾/手机验证码
       let openPws = this.needTransPws === 1;//是否开启交易密码
       if( openPws && openPhoneCode ){
         this.style = {height : '326px' };
       }else{
         if( openPhoneCode && !openPws ){
           this.style = {height : '280px' };
         }else if( openPws && !openPhoneCode){
           this.style = {height : '256px' };
         }
       }
       this.title = this.verfityTitle ? this.verfityTitle  : '安全验证';
       var mobile = this.$store.state.mobile;
       var reg = /^(\d{3})\d{4}(\d{4})$/;
       this.phone = mobile.replace(reg, '$1****$2');
     },
     methods:{
       sendCode() {
         //发送验证码
         let thiz = this ;
         if(thiz.$refs.tdEle.interval != null){
           require('../common/js/toast').toast('请勿重复点击^_^');
         }else{
           let param = {
             blackBox: thiz.blackBox , yzm_token: thiz.yzm_token,token:''
           };
           getMbCode2(param).then(function (res) {
             if( res.code == 200){
               thiz.$refs.tdEle.begin();
               require('../common/js/toast').toast('验证码已发送至您的手机');
               thiz.isSendCode = true;
             }else{
               thiz.$refs.tdEle.resetTd();
             }
           })
         }
       },
       reset(){
         //当验证错误的时候可以 重置同盾获取验证码
         this.$refs.tdEle.resetTd();
       },
       getTdToken(){
         //获取同盾token
         let thiz = this;
         thiz.$refs.tdEle.getTdToken(function (res) {
           thiz.yzm_token = res.yzm_token;
           thiz.blackBox = res.blackBox;
           thiz.sendCode();
         })
       },
       cancel(){
         this.hide();
         this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
       },
       show(){
         this.pws = null;
         this.modalClass = 'modal-show';
       },
       forgetPws(){
         require('../common/js/toast').toast('找回交易密码请打开APP操作');
       },
       hide(){
         this.modalClass = 'modal-hide';
       },
       dialogShow() {
         /*显示弹窗*/
         this.show();
         this.$refs.tdEle.resetTd(); //再次点击展开的时候，默认重置倒计时
       },
       callback() {
         /*点击确定*/
         let info = null;
         if( !this.pws && this.needTransPws === 1){
           info = '请输入交易密码';
         }else if( !this.mbCode  && this.needPhoneCode === 1 ){
           info = '请输入手机验证码';
         }else if( !this.yzm_token && this.needPhoneCode === 1){
           info = '请先完成智能验证';
         }
         if( info ){
           require('../common/js/toast').toast(info);
           info = null;
           return;
         }
         let param = {
           pws : this.pws , code : this.mbCode
         };
         this.$emit('confirm' , param ); /*组件调用方法： @confirm='function'*/
       },
     }
   }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/animate.css";
  #box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
  }
  #content {
    width: 600px;height: 326px;text-align: center;.borderRadius;overflow:hidden;background: #fff;.borderRadius;position: absolute;left: 50%;top: 50%;margin-left: -300px;margin-top: -163px;
    >.p1{
      color: #262626;font-size: 20px;padding-top: 53px;padding-bottom: 29px;
    }
    >.input{
      text-align: left;padding-left: 79px;overflow: hidden;
      &:nth-child(3){
        padding-top: 14px;
      }
      >input{
        .input;width: 356px;height: 40px;padding: 0 11px;margin-right: 15px;float: left;
      }
      >.right{
        .colorYellow;background: none;position: relative;width: calc( 100% - 376px );height: 40px;float: left;line-height: 40px;text-align: left;
        /deep/ span{
          line-height: 40px;text-align: left;
        }
      }
    }
    >.p4{
      padding-left: 79px;text-align: left;font-size: 14px;color: #999;padding-top: 10px;
      >span{
        color: #262626;display: contents;
      }
    }
    >.p5{
      padding-top: 40px;
      >button{
        .submit;width: 160px;height: 38px;line-height: 38px;font-size: 16px;
      }
    }
    .closeWindow{
      padding: 15px;position: absolute;right: 0;top:0;background: none;
      img{width: 13px;height: 13px};color: rgba(0, 0, 0, 0.45);font-size: 18px;
      &:hover{
        color: rgba(0, 0, 0, 0.75);
      }
    }
  }
</style>
